import React from "react";
import Draggable from "./Draggable";
import classNames from "classnames";
import {getView, propsCfgToViewCfg} from "../../component";
import {WeaLocaleProvider} from "ecCom";
import {Tooltip} from "antd";

const getLabel = WeaLocaleProvider.getLabel;

class FormItem extends React.Component {
  render() {
    const { selected, field, onClick, onDrop, onDragEnd, onDragHover } = this.props;

    if (field.placeholder) {
      return (
        <Draggable field={field}
          onDrop={onDrop}
          onDragEnd={onDragEnd}
          className='wea-edc-drag-placeholder wea-f14'
        >
          <div><span>{getLabel('502543','放在这里')}</span></div>
        </Draggable>
      );
    }

    const ComponentView = getView(field.type);

    if (!ComponentView) return ComponentView;
    
    const data = propsCfgToViewCfg(field.type, field.config);

    const { hidden } = data;
    return (
      <Draggable field={field}
        onDrop={onDrop}
        onHover={onDragHover}
        onDragEnd={onDragEnd}
        onClick={onClick}
        className={classNames('wea-edc-form-item', { selected })}
      >
        {
          hidden == 1 &&
            <div className="wea-edc-com-lock">
              <Tooltip placement='bottom' title="仅限管理员可见">
                <i className="icon-edc-f-lock wea-edc-input-icon"></i>
              </Tooltip>
            </div>
        }
        <ComponentView
          value={data.defaultValue} 
          type={field.type} 
          data={data} 
        />
      </Draggable>
    );
  }
}

FormItem.defaultProps = {
  field: {},
  selected: false,
  onClick: () => { }
};

export default FormItem;